@charset "utf-8";
.animated{
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
/*基本特效*/
.flash{
-webkit-animation-name: flash;
}
.bounce{
-webkit-animation-name: bounce;
}
.shake{
-webkit-animation-name: shake;
}
.tada{
-webkit-animation-name: tada;
}
.swing{
-webkit-animation-name: swing;
}
.wobble{
-webkit-animation-name: wobble;
}
.pulse{
-webkit-animation-name: pulse;
}
/*翻转特效*/
.flipx{
-webkit-animation-name: flipx;
}
.flipy{
-webkit-animation-name: flipy;
}
/*淡入特效*/
.fadedown{
-webkit-animation-name: fadedown;
}
.fadeup{
-webkit-animation-name: fadeup;
}
.fadeleft{
-webkit-animation-name: fadeleft;
}
.faderight{
-webkit-animation-name: faderight;
}
.fadedownbig{
-webkit-animation-name: fadedownbig;
}
.fadeupbig{
-webkit-animation-name: fadeupbig;
}
.fadeleftbig{
-webkit-animation-name: fadeleftbig;
}
.faderightbig{
-webkit-animation-name: faderightbig;
}
/*跳弹特效*/
.bouncein{
-webkit-animation-name: bouncein;
}
.bouncedown{
-webkit-animation-name: bouncedown;
}
.bounceup{
-webkit-animation-name: bounceup;
}
.bounceleft{
-webkit-animation-name: bounceleft;
}
.bounceright{
-webkit-animation-name: bounceright;
}
/*旋转特效*/
.rotatein{
-webkit-animation-name: rotatein;
}
.rotateindownleft{
-webkit-animation-name: rotateindownleft;
}
.rotateindownright{
-webkit-animation-name: rotateindownright;
}
.rotateinupleft{
-webkit-animation-name: rotateinupleft;
}
.rotateinupright{
-webkit-animation-name: rotateinupright;
}
/*其他特效*/
.rollin{
-webkit-animation-name: rollin;
}
.zoomindown{
-webkit-animation-name: zoomindown;
}
.lightspeedin{
-webkit-animation-name: lightspeedin;
}
/*基本特效*/
@-webkit-keyframes flash{
0%,50%,100%{opacity: 1;}
25%,75%{opacity: 0;}
}
@-webkit-keyframes bounce{
0%,20%,50%,80%,100%{-webkit-transform:translateY(0)}
40%{-webkit-transform:translateY(-30px)}
60%{-webkit-transform:translateY(-15px)}
}
@-webkit-keyframes shake{
0%,100%{-webkit-transform:translateX(0);}
10%,30%,50%,70%, 90%{-webkit-transform:translateX(-10px);}
20%,40%,60%,80%{-webkit-transform:translateX(10px);}
}
@-webkit-keyframes tada{
0%{-webkit-transform:scale(1)}
10%,20%{-webkit-transform:scale(0.9) rotate(-3deg)}
30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg)}
40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg)}
100%{-webkit-transform:scale(1) rotate(0)}
}
@-webkit-keyframes swing{
20%,40%,60%,80%,100%{-webkit-transform-origin:top center}
20%{-webkit-transform:rotate(15deg)}
40%{-webkit-transform:rotate(-10deg)}
60%{-webkit-transform:rotate(5deg)}
80%{-webkit-transform:rotate(-5deg)}
100%{-webkit-transform:rotate(0deg)}
}
@-webkit-keyframes wobble{
0%{-webkit-transform:translateX(0%)}
15%{-webkit-transform:translateX(-25%) rotate(-5deg)}
30%{-webkit-transform:translateX(20%) rotate(3deg)}
45%{-webkit-transform:translateX(-15%) rotate(-3deg)}
60%{-webkit-transform:translateX(10%) rotate(2deg)}
75%{-webkit-transform:translateX(-5%) rotate(-1deg)}
100%{-webkit-transform:translateX(0%)}
}
@-webkit-keyframes pulse{
0%{-webkit-transform:scale(1)}
50%{-webkit-transform:scale(1.1)}
100%{-webkit-transform:scale(1)}
}
/*翻转特效*/
@-webkit-keyframes flipx{
0%{-webkit-transform:perspective(400px) rotateX(90deg);
opacity:0}
40%{-webkit-transform:perspective(400px) rotateX(-10deg)}
70%{-webkit-transform:perspective(400px) rotateX(10deg)}
100%{-webkit-transform:perspective(400px) rotateX(0deg);
opacity:1}
}
@-webkit-keyframes flipy{
0%{-webkit-transform:perspective(400px) rotateY(90deg);
opacity:0}
40%{-webkit-transform:perspective(400px) rotateY(-10deg)}
70%{-webkit-transform:perspective(400px) rotateY(10deg)}
100%{-webkit-transform:perspective(400px) rotateY(0deg);
opacity:1}
}
/*淡入特效*/
@-webkit-keyframes fadedown{
0%{opacity:0;
-webkit-transform:translateY(-20px)}
100%{opacity:1;
-webkit-transform:translateY(0)}
}
@-webkit-keyframes fadeup{
0%{opacity:0;
-webkit-transform:translateY(20px)}
100%{opacity:1;
-webkit-transform:translateY(0)}
}
@-webkit-keyframes fadeleft{
0%{opacity:0;
-webkit-transform:translateX(-20px)}
100%{opacity:1;
-webkit-transform:translateX(0)}
}
@-webkit-keyframes faderight{
0%{opacity:0;
-webkit-transform:translateX(20px)}
100%{opacity:1;
-webkit-transform:translateX(0)}
}
@-webkit-keyframes fadedownbig{
0%{opacity:0;
-webkit-transform:translateY(-2000px)}
100%{opacity:1;
-webkit-transform:translateY(0)}
}
@-webkit-keyframes fadeupbig{
0%{opacity:0;
-webkit-transform:translateY(2000px)}
100%{opacity:1;
-webkit-transform:translateY(0)}
}
@-webkit-keyframes fadeleftbig{
0%{opacity:0;
-webkit-transform:translateX(-2000px)}
100%{opacity:1;
-webkit-transform:translateX(0)}
}
@-webkit-keyframes faderightbig{
0%{opacity:0;
-webkit-transform:translateX(2000px)}
100%{opacity:1;
-webkit-transform:translateX(0)}
}
/*跳弹特效*/
@-webkit-keyframes bouncein{
0%{opacity:0;
-webkit-transform:scale(.3)}
50%{opacity:1;
-webkit-transform:scale(1.05)}
70%{-webkit-transform:scale(.9)}
100%{-webkit-transform:scale(1)}
}
@-webkit-keyframes bouncedown{
0%{opacity:0;
-webkit-transform:translateY(-2000px)}
60%{opacity:1;
-webkit-transform:translateY(30px)}
80%{-webkit-transform:translateY(-10px)}
100%{-webkit-transform:translateY(0)}
}
@-webkit-keyframes bounceup{
0%{opacity:0;
-webkit-transform:translateY(2000px)}
60%{opacity:1;
-webkit-transform:translateY(-30px)}
80%{-webkit-transform:translateY(10px)}
100%{-webkit-transform:translateY(0)}
}
@-webkit-keyframes bounceleft{
0%{opacity:0;
-webkit-transform:translateX(-2000px)}
60%{opacity:1;
-webkit-transform:translateX(30px)}
80%{-webkit-transform:translateX(-10px)}
100%{-webkit-transform:translateX(0)}
}
@-webkit-keyframes bounceright{
0%{opacity:0;
-webkit-transform:translateX(2000px)}
60%{opacity:1;
-webkit-transform:translateX(-30px)}
80%{-webkit-transform:translateX(10px)}
100%{-webkit-transform:translateX(0)}
}
/*旋转特效*/
@-webkit-keyframes rotatein{
0%{-webkit-transform-origin:center center;
-webkit-transform:rotate(-200deg);
opacity:0}
100%{-webkit-transform-origin:center center;
-webkit-transform:rotate(0);
opacity:1}
}
@-webkit-keyframes rotateindownleft{
0%{-webkit-transform-origin:left bottom;
-webkit-transform:rotate(-90deg);
opacity:0}
100%{-webkit-transform-origin:left bottom;
-webkit-transform:rotate(0);
opacity:1}
}
@-webkit-keyframes rotateindownright{
0%{-webkit-transform-origin:right bottom;
-webkit-transform:rotate(-90deg);
opacity:0}
100%{-webkit-transform-origin:right bottom;
-webkit-transform:rotate(0);
opacity:1}
}
@-webkit-keyframes rotateinupleft{
0%{-webkit-transform-origin:left bottom;
-webkit-transform:rotate(90deg);
opacity:0}
100%{-webkit-transform-origin:left bottom;
-webkit-transform:rotate(0);
opacity:1}
}
@-webkit-keyframes rotateinupright{
0%{-webkit-transform-origin:right bottom;
-webkit-transform:rotate(-90deg);
opacity:0}
100%{-webkit-transform-origin:right bottom;
-webkit-transform:rotate(0);
opacity:1}
}
/*其他特效*/
@-webkit-keyframes rollin{
0%{opacity:0;
-webkit-transform:translateX(-100%) rotate(-120deg)}
100%{opacity:1;
-webkit-transform:translateX(0px) rotate(0deg)}
}
@-webkit-keyframes zoomindown{
0%{opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
60%{opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
@-webkit-keyframes lightspeedin{
0% {opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);}
60%{opacity: 1;
-webkit-transform: skewX(20deg);}
80% {opacity: 1;
-webkit-transform: skewX(-5deg);}
100% {opacity: 1;
-webkit-transform: none;}
}